<script setup>
// 导入Vue 3的响应式API
import { ref, reactive } from 'vue'
// 导入各个子组件
import Header from './components/Header.vue'
import CategoryTabs from './components/CategoryTabs.vue'
import ContentGrid from './components/ContentGrid.vue'
import Siderbar from './components/Siderbar.vue'

// 当前选中的分类 - 使用ref创建响应式数据
// ref用于基本数据类型，如字符串、数字、布尔值
const activeCategory = ref('推荐')

// 分类数据 - 定义所有可用的分类标签
// 这是一个静态数组，包含小红书常见的分类
const categories = [
  '推荐', '学习', '生活', '美食', '穿搭', '旅行', '运动', '娱乐', '职场', '情感'
]

// 内容数据 - 使用reactive创建响应式对象
// reactive用于对象和数组类型，提供深度响应式
const contentData = reactive([
  {
    id: 1,                    // 唯一标识符
    type: 'image',           // 内容类型：图片或文本
    title: '大学生活指南：如何平衡学习与社交', // 标题
    author: '学霸小王',       // 作者名称
    avatar: 'https://d.musicapp.migu.cn/prod/playlist-service/playListimg/402bdb81-c298-4582-b208-543920fb8b08.jpg', // 作者头像
    likes: 1288,             // 点赞数
    image: 'https://n.sinaimg.cn/ent/transform/20160326/z7HN-fxqswxx0255082.jpg', // 内容图片
    tags: ['学习', '生活']   // 标签数组
  },
  {
    id: 2,
    type: 'image',
    title: '宿舍美食分享：简单易做的夜宵',
    author: '美食达人',
    avatar: 'https://d.musicapp.migu.cn/prod/playlist-service/playListimg/402bdb81-c298-4582-b208-543920fb8b08.jpg',
    likes: 856,
    image: 'https://img.shetu66.com/2023/06/12/1686543631054698.jpg',
    tags: ['美食', '宿舍']
  },
  {
    id: 3,
    type: 'image',
    title: '周一OOTD',
    author: '杰伦',
    avatar: 'https://d.musicapp.migu.cn/prod/playlist-service/playListimg/402bdb81-c298-4582-b208-543920fb8b08.jpg',
    likes: 1288,
    image: 'https://n.sinaimg.cn/sinakd20113/10/w690h920/20230208/a000-7d57ff4603b00a6faa74d08996ea9791.jpg',
    tags: ['学习', '生活']
  },
  {
    id: 4,
    type: 'image',
    title: '校园穿搭：秋日校园风搭配',
    author: '时尚博主',
    avatar: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=40&h=40&fit=crop&crop=face',
    likes: 1567,
    image: 'https://n.sinaimg.cn/sinakd20210719ac/345/w1080h1665/20210719/dbca-7817a6becee1b4e492eefd6997e4bd32.jpg',
    tags: ['穿搭', '校园']
  },
  {
    id: 5,
    type: 'image',
    title: '图书馆学习日常',
    author: '书虫小李',
    avatar: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=40&h=40&fit=crop&crop=face',
    likes: 743,
    image: 'https://ts1.tc.mm.bing.net/th/id/OIP-C.4oFm-9Xg1bd5pw1VnJSAHgHaNK?cb=12ucfimg=1&rs=1&pid=ImgDetMain&o=7&rm=3',
    tags: ['学习', '图书馆']
  },
  {
    id: 6,
    type: 'image',
    title: '大学生兼职经验分享',
    author: '兼职达人',
    avatar: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=40&h=40&fit=crop&crop=face',
    likes: 1892,
    image: 'https://n.sinaimg.cn/sinakd20230529s/128/w2048h1280/20230529/940f-37020548194c3ed997860eeaeef42f3d.jpg',
    tags: ['兼职', '经验']
  },
  {
    id: 7,
    type: 'image',
    title: '校园运动：晨跑打卡分享',
    author: '运动达人',
    avatar: 'https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=40&h=40&fit=crop&crop=face',
    likes: 1123,
    image: 'https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?w=400&h=550&fit=crop',
    tags: ['运动', '校园']
  },
  {
    id: 8,
    type: 'image',
    title: '宿舍装饰：打造温馨小窝',
    author: '生活家',
    avatar: 'https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=40&h=40&fit=crop&crop=face',
    likes: 987,
    image: 'https://images.unsplash.com/photo-1586023492125-27b2c045efd7?w=400&h=500&fit=crop',
    tags: ['生活', '宿舍']
  },
  {
    id: 9,
    type: 'image',
    title: '校园旅行：周末短途游推荐',
    author: '旅行者',
    avatar: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=40&h=40&fit=crop&crop=face',
    likes: 1456,
    image: 'https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=400&h=600&fit=crop',
    tags: ['旅行', '校园']
  },
  {
    id: 10,
    type: 'image',
    title: '大学生创业经验分享',
    author: '创业者',
    avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=40&h=40&fit=crop&crop=face',
    likes: 2134,
    image: 'https://images.unsplash.com/photo-1559136555-9303baea8ebd?w=400&h=550&fit=crop',
    tags: ['创业', '经验']
  },
  {
    id: 11,
    type: 'image',
    title: '校园美食探店：食堂新菜品',
    author: '美食探索者',
    avatar: 'https://ts1.tc.mm.bing.net/th/id/R-C.4245d003ab5808d364ad42c9162f73b4?rik=jD5IWnobXSWE1g&riu=http%3a%2f%2fpic.baike.soso.com%2fp%2f20090103%2f20090103120000-107987.jpg&ehk=eQfyMMCGaYLRnIP9CR4d1ao%2bhlb0qr7is%2fRBSo7kDoQ%3d&risl=&pid=ImgRaw&r=0',
    likes: 756,
    image: 'https://ts1.tc.mm.bing.net/th/id/R-C.d8f92328a04cf7d862afcb1094e00874?rik=1xeUCxW3s0aduA&riu=http%3a%2f%2fn.sinaimg.cn%2fsinakd20109%2f422%2fw1024h998%2f20230228%2f7ba7-a33db609e1addbc2df25efb7f47434e1.jpg&ehk=0bMA1cHA%2bVJmKo8IbrPaZc8UxKHRTElEW%2bLvr6%2b4XHQ%3d&risl=&pid=ImgRaw&r=0',
    tags: ['美食', '校园']
  },
  {
    id: 12,
    type: 'image',
    title: '期末复习攻略：高效学习方法',
    author: '学霸小张',
    avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=40&h=40&fit=crop&crop=face',
    likes: 1890,
    image: 'https://ts1.tc.mm.bing.net/th/id/R-C.a47a9af02c4ac77c38f38a51eaa39140?rik=5bgzd%2buLOtSW5Q&riu=http%3a%2f%2fn.sinaimg.cn%2fsinakd20113%2f329%2fw1200h1529%2f20211125%2f91d8-55af1481b1a185439d459009a18dfee8.jpg&ehk=CfJjfNhAQXmZCCMQZWZCLzTGOAgbfHvJblh4xjWoYZw%3d&risl=&pid=ImgRaw&r=0',
    tags: ['学习', '复习']
  },
  {
    id: 13,
    type: 'image',
    title: '校园社团活动：摄影社作品展',
    author: '摄影爱好者',
    avatar: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=40&h=40&fit=crop&crop=face',
    likes: 1234,
    image: 'https://logocdn.feigua.cn/BloggLogo/2828841f70091689d85a44a3cf48a21f.jpg-jpg',
    tags: ['摄影', '社团']
  },
  {
    id: 14,
    type: 'image',
    title: '宿舍生活：室友相处之道',
    author: '生活达人',
    avatar: 'https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=40&h=40&fit=crop&crop=face',
    likes: 987,
    image: 'https://images.unsplash.com/photo-1586023492125-27b2c045efd7?w=400&h=500&fit=crop',
    tags: ['生活', '宿舍']
  },
  {
    id: 15,
    type: 'image',
    title: '校园恋爱：如何平衡感情与学业',
    author: '情感导师',
    avatar: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=40&h=40&fit=crop&crop=face',
    likes: 2156,
    image: 'https://images.unsplash.com/photo-1516589178581-6cd7833ae3b2?w=400&h=600&fit=crop',
    tags: ['情感', '校园']
  }
])

// 切换分类函数 - 处理分类切换逻辑
// 这是一个事件处理函数，当用户点击分类标签时调用
const switchCategory = (category) => {
  // 更新当前激活的分类
  activeCategory.value = category
  // 这里可以添加根据分类筛选内容的逻辑
  console.log('切换到分类:', category)
}
</script>

<template>
  <!-- 应用根容器 - 整个应用的包装器 -->
  <div class="app">
    <!-- 顶部导航栏组件 - 包含Logo、搜索框、用户操作 -->
    <Header />
    
    <!-- 主容器 - 使用flex布局，包含侧边栏和主内容区 -->
    <div class="main-container">
      <!-- 左侧导航栏组件 - 包含主要功能入口 -->
      <Siderbar />
      
      <!-- 主内容区域 - 包含分类标签和内容网格 -->
      <div class="content-area">
        <!-- 分类标签栏组件 - 传递数据和事件 -->
        <!-- :categories 是props传递，将categories数组传递给子组件 -->
        <!-- :active-category 是props传递，将当前激活的分类传递给子组件 -->
        <!-- @switch-category 是事件监听，监听子组件发出的switch-category事件 -->
        <CategoryTabs 
          :categories="categories" 
          :active-category="activeCategory"
          @switch-category="switchCategory"
        />
        
        <!-- 内容网格组件 - 传递内容数据 -->
        <!-- :content-data 是props传递，将内容数据传递给子组件 -->
        <ContentGrid :content-data="contentData" />
      </div>
    </div>
  </div>
</template>

<style>
/* 全局样式重置 - 移除所有默认边距和内边距 */
/* 这是CSS重置，确保在不同浏览器中显示一致 */
* {
  margin: 0;           /* 移除所有默认外边距 */
  padding: 0;          /* 移除所有默认内边距 */
  box-sizing: border-box; /* 使用border-box模型，包含边框和内边距在宽度计算中 */
}

/* 设置全局字体和背景 */
body {
  /* 设置字体族，按优先级排列，确保在不同系统上都有合适的字体 */
  font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  background-color: white; /* 设置背景色为白色 */
}

/* 应用根容器样式 */
.app {
  min-height: 100vh; /* 最小高度为视口高度，确保页面占满整个屏幕 */
}

/* 主容器样式 - 使用flex布局实现整体布局 */
.main-container {
  display: flex;      /* 使用flex布局，子元素水平排列 */
  width: 100%;        /* 宽度占满父容器 */
  padding-top: 60px;  /* 顶部内边距，为固定头部留出空间 */
  box-sizing: border-box; /* 包含内边距在宽度计算中 */
}

/* 内容区域样式 */
.content-area {
  flex: 1;            /* 占据剩余空间，让内容区域自适应 */
  margin-left: 80px;  /* 左侧外边距，为侧边栏留出空间 */
  padding: 0;         /* 无内边距 */
  background: white;   /* 背景色为白色 */
  min-width: 0;       /* 防止flex项目收缩，确保内容正常显示 */
}
</style>